<template>
  <div class="home">
    <div class="button-group" v-for="(item, index) of buttons" :key="index">
      <div v-if="typeof (item.meta['title']) !== 'undefined'">
        <q-button
            @click="() => {
            router.push(item.path)
          }"
        > {{ item.meta.title }}
        </q-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {QButton} from "@qvant/qui-max";

import {ref} from "vue";
import {RouteRecord, useRouter} from "vue-router";

const router = useRouter()
const buttons = ref<RouteRecord[]>(
    router.getRoutes(),
)

</script>

<style scoped lang="scss">
@use "@/styles/base.scss" as base;

.home {
  @include base.layout-center;

  .button-group {
    display: grid;
    width: 100vw;
    margin-inline: 8px;
  }
}
</style>